<template>
  <div class="comments">
    <!-- <p>评论页面</p> -->
    <!-- navbar导航栏 -->
    <div class="comments_navbar">
      <!-- <van-nav-bar
        title="{{ commentslength }}条评论"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar> -->
      <div class="back" @click="onClickLeft">
        <van-icon name="arrow-left"></van-icon>
      </div>
      <div class="title">{{ commentslength }}&nbsp;条评论</div>
    </div>
    <!-- 内容部分 -->
    <div class="comments_body">
      <div class="comments_content">
        <!-- 长评 -->
        <div class="long_number">{{ longlength }}&nbsp;条长评</div>
        <div class="long_comments" v-for="item in longdata" :key="item.index">
          <div class="long_avatar"><img :src="item.avatar" alt="" /></div>
          <div class="long_text">
            <div class="long_top">
              <div class="long_author">{{ item.author }}</div>
              <div class="more"><van-icon name="ellipsis"></van-icon></div>
            </div>
            <div class="long_content">{{ item.content }}</div>
            <div class="long_bottom">
              <div class="long_time">{{ item.time }}</div>
              <div class="long_dots_rugen">
                <div class="long_dots">
                  <van-icon
                    name="good-job-o"
                    v-if="isdots"
                    @click="dianzan"
                  ></van-icon>
                  <van-icon
                    name="good-job"
                    color="blue"
                    v-else
                    @click="dianzan"
                  ></van-icon>
                </div>
                <div class="long_rugen">
                  <van-icon name="chat-o"></van-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <div class="horizontal_line"><hr /></div>
        <!-- 短评 -->
        <div class="short_number">{{ shortlength }}&nbsp;条短评</div>
        <div class="short_comments" v-for="item in shortdata" :key="item.index">
          <div class="short_avatar"><img :src="item.avatar" alt="" /></div>
          <div class="short_text">
            <div class="short_top">
              <div class="short_author">{{ item.author }}</div>
              <div class="short_more">
                <van-popover
                  v-model="showPopover"
                  trigger="click"
                  :actions="actions"
                  placement="bottom-end"
                  ><template #reference>
                    <van-icon name="ellipsis"></van-icon> </template
                ></van-popover>
              </div>
            </div>
            <div class="short_content">{{ item.content }}</div>
            <div class="short_bottom">
              <div class="short_time">{{ item.time }}</div>
              <div class="short_dots_rugen">
                <div class="short_dots">
                  <van-icon name="good-job-o"></van-icon>
                </div>
                <div class="short_rugen">
                  <van-icon name="chat-o"></van-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="testbutton">
      <!-- <van-button type="primary" @click="gotestviewa">测试a页面</van-button> -->
    </div>
    <!-- 底部导航栏 -->
    <div class="comments_tabbar">
      <van-tabbar>
        <van-image
          round
          width="2rem"
          height="2rem"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          class="myavatar"
        />
        <!-- field输入框 -->
        <van-cell-group inset>
          <van-field v-model="value" placeholder="请输入用户名" />
        </van-cell-group>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      edata: [],
      longdata: [],
      shortdata: [],
      showPopover: false,
      actions: [{ text: "复制" }, { text: "举报" }],
      isdots: false,
      myvalue:''
    };
  },
  created() {
    // this.axios
    //   .get("https://apis.netstart.cn/zhihudaily/story/9741200/short-comments")
    //   .then((res) => {
    //     console.log("testa", res);
    //     console.log(111);
    //     this.shortdata = res.data.comments;
    //     console.log("long", this.longdata);
    //     console.log("short", this.shortdata);
    //   });
    // this.myid = this.$route.query.id;
    // console.log("commentid",this.myid);
    // this.axios
    //   .get(
    //     "https://apis.netstart.cn/zhihudaily/story" +
    //       this.$route.query.id +
    //       "/extra"
    //   )
    //   .then((res) => {
    //     this.edata = res.data.comments;
    //   });
    // this.axios
    //   .get(
    //     "https://apis.netstart.cn/zhihudaily/story/" +
    //       this.$route.query.id +
    //       "/long-comments"
    //   )
    //   .then((res) => {
    //     console.log("long", res);
    //     this.longdata = res.data.comments;
    //   });
     this.myvalue =  this.$route.query.twoid
      console.log( this.myvalue);
      this.axios.get("/story/" +  this.myvalue + "/short-comments/").then(res =>{
        console.log(res);
        this.shortdata = res.data.comments;
      })
     this.myvalue =  this.$route.query.twoid
      console.log( this.myvalue);
      this.axios.get("/story/" +  this.myvalue + "/long-comments/").then(res =>{
        console.log(res);
        this.longdata = res.data.comments;
      })
     
    // this.longlengths = this.longdata.length;
    // console.log("888",this.longlengths);
  },
  methods: {
    diazhan() {
      this.isdots = !this.isdots;
    },
    onClickLeft() {
      this.$router.push({ name: "Content" });
    },
    gotestviewa() {
      this.$router.push({ name: "TestViewa" });
    },
  },
  computed: {
    longlength() {
      let longlengths = 0;
      longlengths = this.longdata.length;
      return longlengths;
    },
    shortlength() {
      let shortlengths = 0;
      shortlengths = this.shortdata.length;
      return shortlengths;
    },
    commentslength() {
      let commentslengths = 0;
      commentslengths = this.longlength + this.shortlength;
      return commentslengths;
    },
  },
};
</script>
<style lang="less" scoped>
.comments {
  width: 100vw;
  height: 500vw;
  .comments_navbar {
    width: 100vw;
    height: 2rem;
    vertical-align: middle;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: white;
    .back {
      line-height: 1rem;
      margin-top: 0.5rem;
      margin-left: 0.5rem;
    }
    .title {
      text-align: center;
      align-items: center;
      margin-left: 9rem;
      margin-top: 0.25rem;
    }
  }
  .comments_content {
    margin-top: 10vw;
    .long_number {
      margin-top: 3vw;
      margin-left: 4vw;
    }
    .long_comments {
      margin-top: 7vw;
      display: flex;
      justify-content: space-between;
    }
    .long_avatar {
      width: 3rem;
      height: 3rem;
      margin-left: 1rem;
      img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
      }
    }
    .long_text {
      .long_top {
        display: flex;
        justify-content: space-between;
        .long_author {
          margin-left: 3vw;
          font-weight: bold;
          .more {
            margin-left: -5vw;
          }
        }
      }
      .long_content {
        margin-top: 1.5vw;
        text-align: left;
        margin-left: 3vw;
      }
      .long_bottom {
        margin-top: 5vw;
        display: flex;
        justify-content: space-between;
        .long_time {
          margin-left: 3vw;
          color: #c4c4c4;
        }
        .long_dots_rugen {
          display: flex;
          justify-content: space-between;
          .long_dots {
            margin-right: 1.5rem;
          }
          .long_rugen {
            margin-right: 1rem;
          }
        }
      }
    }
    .short_number {
      margin-top: 2vw;
      margin-left: 4vw;
    }
    .short_comments {
      width: 100vw;
      display: flex;
      // justify-content: space-between;
      margin-top: 2rem;
      .short_avatar {
        width: 3rem;
        height: 3rem;
        margin-left: 1rem;
        img {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }
      }
      .short_text {
        .short_top {
          width: 80vw;
          display: flex;
          justify-content: space-between;
          .short_author {
            margin-left: 3vw;
            font-weight: bold;
            .short_more {
              margin-left: -5vw;
            }
          }
        }
        .short_content {
          margin-top: 1.5vw;
          text-align: left;
          margin-left: 3vw;
        }
        .short_bottom {
          margin-top: 5vw;
          display: flex;
          justify-content: space-between;
          .short_time {
            margin-left: 3vw;
            color: #c4c4c4;
          }
          .short_dots_rugen {
            display: flex;
            justify-content: space-between;
            .short_dots {
              margin-right: 1.5rem;
            }
            .short_rugen {
              margin-right: 1rem;
            }
          }
        }
      }
    }
    .comments_tabbar {
      width: 375px;
      .myavatar {
        margin-top: 0.5rem;
        margin-left: 2rem;
        margin-right: 0.5rem;
      }
      .inset {
        margin-left: -1rem;
      }
    }
  }
}
</style>